<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../CSS/details.css">
</head>
<body>
    <nav class="navbar header">
        <div class="container style">
            <ul class="nav navbar-nav">
                <li class="h">精品女装</li>
                <li><a href="../首页商品展示/home.html">首页</a></li>
                <li><a href="../购物车/shopcar.html">我的购物车</a></li>
                <li><a href="#">您好, zhsan</a></li>
                <li><a href="#">退出</a></li>
            </ul>
        </div>
    </nav>

    <div class="container-fluid">
        <h1 class="text-center">女装 柔软全棉条纹弧形下摆圆领T恤(长袖元气少女感)</h1><br>
        <div class="row">
            <div class="col-lg-4 col-md-2 col-lg-offset-1 col-md-offset-2 col-xs-offset-2">
                <img src="../images/dress1.jpg" alt="商品图片" class="img-responsive img-rounded img-zoom " >
            </div>
            <div class="col-lg-4 col-lg-offset-2">
                <br><br>
                <div class="form-check form-check-inline size-selector">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="size" value="150/76A/XS"> 150/76A/XS
                    </label>
                </div>
                <div class="form-check form-check-inline size-selector">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="size" value="155/80A/S"> 155/80A/S
                    </label>
                </div>
                <div class="form-check form-check-inline size-selector">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="size" value="160/84A/M"> 160/84A/M
                    </label>
                </div>
                <div class="form-check form-check-inline size-selector">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="size" value="165/88A/L"> 165/88A/L
                    </label>
                </div>
                <div class="form-check form-check-inline size-selector">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="size" value="170/92A/XXL"> 170/92A/XXL
                    </label>
                </div>
                <div class="form-check form-check-inline size-selector">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="size" value="175/100B/XXL"> 175/100B/XXL
                    </label>
                </div>
                <div class="form-group delivery-method">
                    <div class="form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="delivery" value="快递"> 快递配送
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="delivery" value="自提"> 门店自提
                        </label>
                    </div>
                </div>
                <div class="num&price">
                    <button class="btn btn-secondary" id="decreasebtn" onclick="decreaseQuantity()">-</button>
                    <input type="number" id="quantityInput" class="form-control numinput" value="1" min="1" max="100" step="1">
                    <button class="btn btn-secondary" id="increasebtn" onclick="increaseQuantity()">+</button>
                    <p class="lead">抢购价：<strong>￥399元</strong></p>
                    <p class="lead">原价：<del>￥499元</del></p>
                </div>
                <div class="mt-4">
                    <button class="btn btn-primary btn-lg " onclick="addToCart()">加入购物车</button>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-lg-6 col-lg-offset-1">
                <h2>商品说明</h2>
                <p>棉质面料具有柔软的穿着感受。下摆既可收进下装腰部穿着，亦可外露，适合打造多样造型。</p>
                <p>大身采用质地柔軟的棉质面料制成。</p>
                <p>剪裁具有适度宽松感，舒爽好穿，适合打造时尚造型。</p>
                <p>百搭的圆领设计，单穿叠穿两相宜。</p>
            </div>
        </div>

        <h2>为您推荐</h2>
        <div class="row">
            <div class="row">
                <div class=" col-sm-6 col-md-4 col-lg-3 mb-4">
                    <div class="thumbnail">
                        <a href="../商品详情/details.html">
                            <img src="../images/dress1.jpg" class="img-responsive" alt="...">
                        </a>
                        <div class="caption">
                            <h3 class="text-center"><a href="../商品详情/details.html" class="link">红色裙子</a></h3>
    
                            <div class="row">
                                <div class="col-xs-6">
                                    <p class="price">￥299.00</p>
                                </div>
                                <div class="col-xs-6 text-right">
                                    <span class="star-rating" title="这是店铺等级">★★★★★</span>
                                </div>
                            </div>
                            <p class="text-center">商品描述：高质量面料，舒适透气...</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                    <div class="thumbnail">
                        <a href="../商品详情/details.html">
                            <img src="../images/dress2.jpg" class="img-responsive" alt="...">
                        </a>
                        <div class="caption">
                            <h3 class="text-center"><a href="../商品详情/details.html">白色裙子</a></h3>
                            <div class="row">
                                <div class="col-xs-6">
                                    <p class="price">￥299.00</p>
                                </div>
                                <div class="col-xs-6 text-right">
                                    <span class="star-rating" title="这是店铺等级">★★★★★</span>
                                </div>
                            </div>
                            <p class="text-center">商品描述：高质量面料，舒适透气...</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                    <div class="thumbnail">
                        <a href="../商品详情/details.html">
                            <img src="../images/dress3.jpg" class="img-responsive" alt="...">
                        </a>
                        <div class="caption">
                            <h3 class="text-center"><a href="../商品详情/details.html">白色上衣</a></h3>
    
                            <div class="row">
                                <div class="col-xs-6">
                                    <p class="price">￥299.00</p>
                                </div>
                                <div class="col-xs-6 text-right">
                                    <span class="star-rating" title="这是店铺等级">★★★★★</span>
                                </div>
                            </div>
                            <p class="text-center">商品描述：高质量面料，舒适透气...</p>
                            <p class="text-center">
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                    <div class="thumbnail">
                        <a href="../商品详情/details.html">
                            <img src="../images/dress4.jpg" class="img-responsive" alt="...">
                        </a>
                        <div class="caption">
                            <h3 class="text-center"><a href="../商品详情/details.html" >黑白套装</a></h3>
    
                            <div class="row">
                                <div class="col-xs-6">
                                    <p class="price">￥299.00</p>
                                </div>
                                <div class="col-xs-6 text-right">
                                    <span class="star-rating" title="这是店铺等级">★★★★★</span>
                                </div>
                            </div>
                            <p class="text-center">商品描述：高质量面料，舒适透气...</p>
                            <p class="text-center">
                            </p>
                        </div>
                    </div>
                </div>
    
            </div>
    </div>
    
    <script src="../jquery.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../JS/details.js"></script>
    
</body>